<template>
  <div>
    <el-card>
      <!-- <h1>个人信息</h1> -->
      <div class="userinfo">
        <!-- <div class="headtop">
          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
        </div> -->
        <div class="info">
          <el-row>
            <el-col :span="24">姓名：{{ name ? name : "某领导" }}</el-col>
            <el-col :span="24">手机：{{ phone }}</el-col>
            <el-col :span="24">系统版本：{{ use_type }}</el-col>
            <el-col :span="24"
              >试用日期：{{ start_time }} 至 {{ end_time }}</el-col
            >
            <el-col :span="24"
              >公司名称：{{ company ? company : "某公司" }}</el-col
            >
            <el-col :span="24">注册日期：{{ start_time }}</el-col>
          </el-row>
        </div>
      </div>
      <!-- <h1 style="margin-top: 20px;">公司信息</h1>
      <div class="userinfo">

        <div class="info">
          <el-row>
            <el-col :span="8">公司名称：{{ company }}</el-col>
            <el-col :span="8">注册日期：{{ start_time }}</el-col>

          </el-row>
        </div>
      </div> -->
    </el-card>
  </div>
</template>

<script>
import store from "@/store";
export default {
  data() {
    return {
      name: store.state.userInfo.user,
      phone: store.state.userInfo.mobilephone,
      use_type: store.state.userInfo.use_type,
      start_time: store.state.userInfo.start_time,
      end_time: store.state.userInfo.end_time,
      company: store.state.userInfo.company,
    };
  },
};
</script>

<style lang="scss" scoped>
h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

div.userinfo {
  display: flex;
  align-items: center;

  div.headtop {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 100px;
    background-color: #ccc;
    display: flex;
    align-items: center;

    img {
      width: 100%;
    }
  }

  div.info {
    padding:20px;
    font-size: 32px;
    flex: 1;
    ::v-deep .el-col{
      margin-bottom:10px;
    }
  }
}
</style>
